<template>
  <div>
    <div class="inputs-text">
      <input type="text" placeholder="输入城市名或拼音" v-model="keyword"/>
    </div>
    <div class="reach-result" v-show="keyword !== ''" ref="cityInput">
      <ul>
        <li class="border-bottom" v-for="item of resultList" :key="item.id">{{item.name}}</li>
        <li v-show="noData">没有找到匹配的内容</li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CityInputs',
  props: {
    list: Object
  },
  data () {
    return {
      keyword: '',
      resultList: []
    }
  },
  computed: {
    noData () {
      return this.resultList.length === 0
    }
  },
  mounted () {
    // let wrapper = document.querySelector('.content-boss')
    this.scroll = new BScroll(this.$refs.cityInput, {
      tap: true,
      click: true
    })
  },
  watch: {
    keyword () {
      let result = []
      for (let key in this.list) {
        this.list[key].forEach((obj, index) => {
          if (obj.spell.indexOf(this.keyword) !== -1 || obj.name.indexOf(this.keyword) !== -1) {
            result.push(obj)
          }
        })
      }
      this.resultList = result
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .inputs-text
    background #00BCD4
    margin 0 auto
    text-align center
    position fixed
    top 50px
    width 100%
    input
      width 95%
      border-radius 0.06rem
      font-size 0.36rem
      margin-bottom 0.2rem
      padding 0.12rem 0
      text-align center
  .reach-result
    position absolute
    top 1.98rem
    left 0
    right 0
    bottom 0
    background #eeeeee
    z-index 1
    overflow hidden
    li
      line-height 0.6rem
      background white
      padding-left 0.2rem
</style>
